<template>
  <el-dialog
    v-model="visibleInner"
    title="生成文件"
    width="480px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleClose"
  >
    <div style="display: flex; flex-direction: column; gap: 12px">
      <div style="font-size: 13px; color: #666">
        正在生成文本并流式写入到本地文件，请勿关闭页面。
      </div>

      <div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #666;
            margin-bottom: 6px;
          "
        >
          <span>进度</span>
          <span>{{ progressText }}</span>
        </div>
        <el-progress :percentage="percent" :stroke-width="14" />
      </div>

      <div
        style="
          font-size: 12px;
          color: #999;
          display: flex;
          justify-content: space-between;
        "
      >
        <span>目标文件：{{ filename }}</span>
        <span>状态：{{ saving ? "进行中" : "已结束" }}</span>
      </div>
    </div>

    <template #footer>
      <div style="display: flex; gap: 8px; justify-content: flex-end">
        <el-button :disabled="!saving" @click="onCancel">取 消</el-button>
        <el-button type="primary" :disabled="saving" @click="onConfirmClose"
          >关 闭</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, watch, ref } from "vue";

const props = defineProps<{
  modelValue: boolean;
  saving: boolean;
  filename: string;
  percent: number;
  writtenLines: bigint;
  totalLines: bigint;
  formatBigInt: (n: bigint) => string;
}>();

const emits = defineEmits<{
  (e: "update:modelValue", v: boolean): void;
  (e: "cancel"): void;
  (e: "close"): void;
}>();

const visibleInner = ref(props.modelValue);
watch(
  () => props.modelValue,
  v => (visibleInner.value = v)
);
watch(visibleInner, v => emits("update:modelValue", v));

const progressText = computed(() => {
  const p = Math.max(0, Math.min(100, Math.floor(props.percent)));
  return `${props.formatBigInt(props.writtenLines)} / ${props.formatBigInt(props.totalLines)} 行（${p}%）`;
});

function handleClose() {
  emits("close");
}

function onCancel() {
  emits("cancel");
}

function onConfirmClose() {
  emits("update:modelValue", false);
  emits("close");
}
</script>
